﻿@namespace BootstrapBlazor.Components
@inherits IdComponentBase

<div @ref="@ToggleElement" class="btn-group dropup floating-toggle">

    <div class="floating-pulse" data-bs-toggle="tooltip" title="@Title" data-bs-placement="left">
        <span class="floating-pulse-ring"></span>
    </div>

    <button type="button" class="btn btn-outline-primary dropdown-toggle p-0" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside" data-bs-offset="0,-10" id="@Id">
        @if (ToggleIcon == null)
        {
            <svg viewBox="0 0 1024 1024" width="64" height="64" class="fa fa-fw">
                <path d="M0 0h487.070625v487.070625H0V0z m0 0" fill="#F25022"></path>
                <path d="M537.143975 0h486.426825v487.070625h-486.426825q-0.357667-243.571079 0-487.070625z m0 0" fill="#80BA01"></path>
                <path d="M0 536.786308h487.070625v487.070625H0z m0 0" fill="#02A4EF"></path>
                <path d="M536.857841 536.857841h486.999092v487.070626H536.857841V536.857841z m0 0" fill="#FFB902"></path>
            </svg>
        }
        else
        {
            @ToggleIcon
        }
    </button>

    <div class="dropdown-menu p-0 border-0" aria-labelledby="@Id">
        <div class="card text-white bg-primary">
            @if (!string.IsNullOrWhiteSpace(HeaderText))
            {
                <div class="card-header">
                    @HeaderText
                </div>       
            }
            <div class="card-body p-0">
                @ToggleContent
            </div>
        </div>
    </div>
</div>

@code
{
    /// <summary>
    /// 获得/设置 弹出按钮图标
    /// </summary>
    [Parameter]
    public RenderFragment? ToggleIcon { get; set; }

    /// <summary>
    /// 获得/设置 弹出内容
    /// </summary>
    [Parameter]
    public RenderFragment? ToggleContent { get; set; }

    /// <summary>
    /// 获得/设置 提示内容
    /// </summary>
    [Parameter]
    public string? Title { get; set; }

    /// <summary>
    /// 获得/设置 标题内容
    /// </summary>
    [Parameter]
    public string? HeaderText { get; set; }

    /// <summary>
    /// 浮动元素
    /// </summary>
    private ElementReference ToggleElement { get; set; }

    /// <summary>
    /// OnAfterRenderAsync 方法
    /// </summary>
    /// <param name="firstRender"></param>
    /// <returns></returns>
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            if (!string.IsNullOrWhiteSpace(Title))
            {
                await JSRuntime.InvokeVoidAsync("$.bb_init_floating_toggle", ToggleElement);
            }
        }
    }
}
